import { defineComponent, reactive } from "vue";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import RoundInfo from "@/components/RoundInfo";
import { Steps, Step } from "vant";
import RowView from "@/components/RowView";
import Text from "@/components/Text";
import Phone from "@/components/Phone";
import phone from "@/assets/image/phone.png";
import TitleView from "@/components/TitleView";
import { Divider } from "vant";
import ListView from "@/components/ListView";
import Search from "@/components/Search";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "",
  setup() {
    const router = useRouter();
    const form = reactive({
      name: "",
    });
    const renderItem = (e: any) => {
      return (
        <div
          class={"text-[#333] text-[16px]"}
          onClick={() => router.push(`/helpCenterDetails?id=${e.id}`)}
        >
          {e.title}
        </div>
      );
    };
    const render1 = () => {
      return (
        <CardView class={"!py-[20px]"}>
          <Search v-model={form.name} placeholder="请输入搜索关键词" />
          <div class={"!px-[12px]"}>
            <TitleView
              class={"pt-[6px] pb-[10px]"}
              style={{
                borderBottom: "1px solid #f3f3f3",
              }}
              title={"热门问题"}
            />
            <ListView
              type="list"
              url="/api/help/center/listData"
              renderItem={renderItem}
              itemHeight={50}
              params={form}
              themeStyle="list-bottom-border"
            />
          </div>
        </CardView>
      );
    };
    const render6 = () => {
      return (
        <div class="flex items-center justify-center !mt-[30px] mb-[20px]">
          <img src={phone} class={"w-[20px] h-[20px] mr-[10px]"} />
          <span class={"flex items-center"}>
            <span class="text-[#999999] text-[14px]">
              热线电话:
              <Phone phone="0574-21338675" />
            </span>
          </span>
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="帮助中心" childClass="!p-[10px]">
          {render1()}
          {render6()}
        </PageTitle>
      );
    };
  },
});
